// 提供 频道 相关的vuex操作
import { getAllChannels, getChannels } from '@/api/channels'

const state = {
  // 用户频道数据
  userChannel: [],
  // 可选数据频道
  allChannels: []
}

const mutations = {
  setUserChannel(state, value) {
    state.userChannel = value
  },
  // 逐一添加我的频道
  addUserChannel(state, value) {
    state.userChannel.push(value)
  },
  setAllChannel(state, value) {
    state.allChannels = value
  }
}

const actions = {
  // axios的异步操作 ==> 获取数据 ==> commit('setUserChannel')
  async ActionGetUserChannel(context) {
    const res = await getChannels()

    // this.channelsList = res.data.channels
    context.commit('setUserChannel', res.data.channels)
  },

  async ActionGetAllChannel(context) {
    const res = await getAllChannels()
    console.log(res)

    context.commit('setAllChannel', res.data.channels)
  }
}
const getters = {
  // vuex的计算属性 ==> 计算可选频道的数据
  optionChannel(state) {
    // 计算 ==> 所有数据频道 - 我的频道数据 ==> 可选
    // 遍历所有频道, 从里面过滤出我的频道没有的数据
    return state.allChannels.filter(item => {
      // some判断, 数组里面有符合条件的,只要有符合条件就会返回true
      // const res = state.userChannel.some(channel => channel.id === item.id)

      // if (res === true) {
      //   // 不要的可选属性
      //   return false
      // } else {
      //   // 要的可选属性
      //   return true
      // }

      // 以上代码简化
      return !state.userChannel.some(channel => channel.id === item.id)
    })
  }
}

export default {
  // 命名空间
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}
